import { CloseOutlined } from '@ant-design/icons';
import { Button } from 'antd';
import './index.less';

function CardHover({ children, closeable = false, onClose }) {
  return (
    <div className="container noselect" style={{ position: 'relative' }}>
      <div className="canvas">
        <div className="tracker tr-1"></div>
        <div className="tracker tr-2"></div>
        <div className="tracker tr-3"></div>
        <div className="tracker tr-4"></div>
        <div className="tracker tr-5"></div>
        <div className="tracker tr-6"></div>
        <div className="tracker tr-7"></div>
        <div className="tracker tr-8"></div>
        <div className="tracker tr-9"></div>
        <div className="tracker tr-10"></div>
        <div className="tracker tr-11"></div>
        <div className="tracker tr-12"></div>
        <div className="tracker tr-13"></div>
        <div className="tracker tr-14"></div>
        <div className="tracker tr-15"></div>
        <div className="tracker tr-16"></div>
        <div className="tracker tr-17"></div>
        <div className="tracker tr-18"></div>
        <div className="tracker tr-19"></div>
        <div className="tracker tr-20"></div>
        <div className="tracker tr-21"></div>
        <div className="tracker tr-22"></div>
        <div className="tracker tr-23"></div>
        <div className="tracker tr-24"></div>
        <div className="tracker tr-25"></div>
        <div id="card" >
          {children}
        </div>
        {closeable && (
            <Button
              type='primary'
              size='small'
              danger
              shape="circle"
              icon={<CloseOutlined />}
              onClick={(e) => {
                e.stopPropagation();
                onClose();
              }}
              style={{position: 'absolute',right:0,top:0,zIndex:999999}}
            ></Button>
          )}
      </div>
    </div>
  );
}

export default CardHover;
